<!DOCTYPE html>
<html lang="en">
<body>
	<!-- NAVIGATION -->
	<nav id="navigation" th:fragment="navigation">
		<!-- container -->
		<div class="container">
			<!-- responsive-nav -->
			<div id="responsive-nav">
				<!-- NAV -->
				<ul class="main-nav nav navbar-nav" th:each="nav,lstat : ${navs}">
					<!--${lstat.index eq 0?'active':''}  -->
					<li ><a href="#" th:href="'#'+${nav.code}" th:onclick="'javascript : loading(this)'" th:name="${nav.name}"><span th:text="${nav.name}" style="padding: 10px"> Home</span></a></li>
				</ul>
				<!-- /NAV -->
			</div>
			<!-- /responsive-nav -->
		</div>
		<!-- /container -->
		<script type="text/javascript">
		var index = 0;
		var size = 10;
		function loading(t){
			var type = t.href.substr(t.href.lastIndexOf("#")+1,t.href.length);
			var navName = t.name;
			console.log(navName+" - "+type);
			var url = '/prdtemp?group='+type+"&start="+index+"&step="+size;
		    $.ajax({
		            url: url,
		            type: 'get',
		            beforeSend:function (){  
		            	//showLoading(load);
		            },
		            success: function (data) {
		                $('#load').html(data);
		                freshProduct();
		                $('#navName').html(navName);
		                index = index+size;
		                //closeProgress();
		            },
		            error: function (e, jqxhr, settings, exception){
		            	//closeProgress();
		            	alert(e);
		            }
		         });
			}
			//刷新产品
			function freshProduct(){
				// Products Slick
            	$('.products-slick').each(function() {
            		var $this = $(this),
            			$nav = $this.attr('data-nav');
            		$this.slick({
            			slidesToShow: 4,
            			slidesToScroll: 1,
            			autoplay: true,
            			infinite: true,
            			speed: 300,
            			dots: false,
            			arrows: true,
            			appendArrows: $nav ? $nav : false,
            			responsive: [{
            	        breakpoint: 991,
            	        settings: {
            	          slidesToShow: 2,
            	          slidesToScroll: 1,
            	        }
            	      },
            	      {
            	        breakpoint: 480,
            	        settings: {
            	          slidesToShow: 1,
            	          slidesToScroll: 1,
            	        }
            	      },
            	    ]
            		});
				});
			}
		</script>
	</nav>
	<!-- /NAVIGATION -->
</body>
</html>
